<template>
  <!-- :title="titleMap[mode]" -->
  <a-modal
    style="width: 50%"
    title="设备配置"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :destroyOnClose="true"
    @cancel="handleCancel"
    :maskClosable="false">
    <div style="margin-top: 12px;">
      <a-form-model ref="ruleAddForm" :model="addForm" :rules="addRules">
        <a-form-model-item label="设备云ID" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cloudId">
          <a-input placeholder="请输入设备云ID" v-model.trim="addForm.cloudId" />
        </a-form-model-item>
        <a-form-model-item label="协议" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="protocol">
          <a-input placeholder="请输入协议" v-model.trim="addForm.protocol" />
        </a-form-model-item>
        <a-form-model-item label="服务器地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="serviceIp">
          <a-input placeholder="请输入服务器地址" v-model.trim="addForm.serviceIp" />
        </a-form-model-item>
        <a-form-model-item label="服务器端口" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="servicePort">
          <a-input placeholder="请输入服务器端口" v-model.trim="addForm.servicePort" />
        </a-form-model-item>
        <a-form-model-item label="MQTT协议主题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mqttTopic">
          <a-input placeholder="请输入MQTT协议主题" v-model.trim="addForm.mqttTopic" />
        </a-form-model-item>
        <a-form-model-item label="服务器用户名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="accountName">
          <a-input placeholder="请输入服务器用户名" v-model.trim="addForm.accountName" />
        </a-form-model-item>
        <a-form-model-item label="服务器密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="accountPassword">
          <a-input placeholder="请输入服务器密码" v-model.trim="addForm.accountPassword" />
        </a-form-model-item>
        <a-form-model-item label="设备IP地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="localIp">
          <a-input placeholder="请输入设备IP地址" v-model.trim="addForm.localIp" />
        </a-form-model-item>
        <a-form-model-item label="设备地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
          <a-input placeholder="请输入设备地址" v-model.trim="addForm.address" />
        </a-form-model-item>
        <a-form-model-item label="描述信息" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="description">
          <a-textarea placeholder="请输入描述信息" :rows="4" v-model.trim="addForm.description" :max-length="255" />
        </a-form-model-item>
      </a-form-model>
    </div>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        关闭
      </a-button>
      <a-button type="primary" :visible="visibleBtn" :loading="loadingBtn" @click="handleOk">
        保存
      </a-button>
    </template>
  </a-modal>
</template>
<script>
import { devicesConfig, detailDevices } from '@/api/clockingIn'
export default {
    components: {},
    data () {
        return {
            addRules: {
                cloudId: [
                    { required: true, message: '请输入设备云ID	!', trigger: 'blur' }
                ],
                serviceIp: [
                    { required: true, message: '请输入服务器地址!', trigger: 'blur' }
                ],
                servicePort: [
                    { required: true, message: '请输入服务器端口!', trigger: 'blur' }
                ],
                mqttTopic: [
                    { required: true, message: '请输入MQTT协议主题!', trigger: 'blur' }
                ],
                accountName: [
                    { required: true, message: '请输入服务器用户名!', trigger: 'blur' }
                ],
                accountPassword: [
                    { required: true, message: '请输入服务器密码!', trigger: 'blur' }
                ]
            },
            addForm: {
                deviceId: 0,	// 设备ID
                cloudId: '', // 设备云ID
                protocol: '',	// 协议
                serviceIp: '',	// 服务器地址
                servicePort: 0,	// 服务器端口
                mqttTopic: '',	// MQTT协议主题
                accountName: '',	// 服务器用户名
                accountPassword: '',	// 服务器密码
                localIp: '',	// 设备IP地址
                address: '',	// 设备地址
                description: ''	// 描述信息
            },
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            },

            visible: false,
            confirmLoading: false,
            loading: false,
            visibleBtn: false,
            loadingBtn: false,
            mode: 'add',
            titleMap: {
                add: '新增',
                edit: '编辑'
            },
            rowData: ''
        }
    },
    mounted () {

    },
    methods: {

        // 显示
        open (row) {
            if (row.deviceId) {
                detailDevices(row.deviceId).then(res => {
                    console.log(res)
                    if (res.code == 200) {
                        const data = res.data
                        const config = data.config
                        if (config) this.addForm = config
                        else this.addForm.deviceId = data.device.deviceId
                    }
                })
            }
            // this.mode = mode;
            this.visible = true
            return this
        },

        // 关闭
        handleCancel () {
            this.visible = false
            this.loadingBtn = false
            this.visibleBtn = false
            this.$emit('close')
        },
        // 确认
        handleOk () {
            this.loadingBtn = true
            this.visibleBtn = true
            this.$refs.ruleAddForm.validate(valid => {
                if (valid) {
                    devicesConfig(this.addForm).then(res => {
                        if (res.code === 200) {
                            this.$notification['success']({
                                message: '提示',
                                description: '保存成功！',
                                duration: 8
                            })
                            this.visible = false
                            this.$emit('success')
                        } else {
                            this.$notification['error']({
                                message: '提示',
                                description: res.message,
                                duration: 8
                            })
                        }
                        this.visibleBtn = false
                        this.loadingBtn = false
                    })
                } else {
                    this.loadingBtn = false
                    this.visibleBtn = false
                    return false
                }
            })
        }
    }
}
</script>
<style scoped lang="less" ></style>
